<template>
  <div class="app-container" >
    <el-row >
      <el-card style="margin-bottom:10px;">
        <el-col :span="24" :xs="24">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                   label-width="68px">
            <el-form-item label="流水号" prop="serialNumber">
              <el-input
                v-model="queryParams.serialNumber"
                placeholder="请输入流水号"
                clearable
              />
            </el-form-item>
            <el-form-item label="标题" prop="recordTitle">
              <el-input
                v-model="queryParams.recordTitle"
                placeholder="请输入标题"
                clearable
              />
            </el-form-item>
            <el-form-item label="申请人" prop="userName">
              <el-input
                v-model="queryParams.userName"
                placeholder="请输入申请人姓名"
                clearable
              />
            </el-form-item>
            <el-form-item label="开始时间" prop="problemStartDate">
              <el-date-picker clearable
                              v-model="queryParams.problemStartDate"
                              type="date"
                              value-format="yyyy-MM-dd"  style="width:160px"
                              placeholder="请选择">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="problemEndDate">
              <el-date-picker clearable
                              v-model="queryParams.problemEndDate"
                              type="date"
                              value-format="yyyy-MM-dd" style="width:160px"
                              placeholder="请选择">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="审批人" prop="approverUserId">
              <el-select v-model="queryParams.approverUserId" placeholder="请选择审批人"
                         filterable>
                <el-option
                  v-for="item in userList"
                  :key="item.userId"
                  :label="item.nickName"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="流程状态" prop="listType">
              <el-select v-model="queryParams.listType"  >
                <el-option label="全部" value=""/>
                <el-option label="进行中" value="1" />
                <el-option label="结束" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="部门" prop="applicantDetpCode">
              <el-select v-model="queryParams.applicantDetpCode"  transfer >
                <el-option
                  v-for="item in deptOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="产品大类" prop="productCategory">
              <el-select v-model="queryParams.productCategory" placeholder="请选择产品大类">
                <el-option
                  v-for="dict in dict.type.product_category"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="问题层级" prop="taskStatus" v-if="loginUserLevel == 5">
              <el-select v-model="queryParams.taskStatus" placeholder="请选择问题层级" clearable>
                <el-option
                  v-for="dict in dict.type.user_level_options"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="紧急度" prop="urgency">
              <el-select v-model="queryParams.urgency" placeholder="请选择紧急度" clearable>
                <el-option
                  v-for="dict in dict.type.meet_urgency"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-card>
    </el-row>

    <el-row >
      <el-col :span="7" >
        <el-card style="margin-right:10px;margin-bottom:5px;height: 240px;">
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="kpi1" style="height: 240px" />
          </div>
        </el-card>
        <el-card style="margin-right:10px;margin-bottom:5px;height: 240px;">
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="kpi2" style="height: 240px" />
          </div>
        </el-card>
        <el-card style="margin-right:10px;height: 240px;">
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="kpi3" style="height: 240px" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="17" >
        <el-card style="height: 700px;">
          <el-table v-loading="loading" :data="flowList" border>
            <el-table-column label="序号" type="index" align="center">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="流水号" align="center" prop="serialNumber" :show-overflow-tooltip="true" />
            <el-table-column label="标题" align="center" prop="recordTitle" :show-overflow-tooltip="true" />
            <el-table-column label="问题列表日期" align="center" prop="applicantTime" :show-overflow-tooltip="true" />
<!--            <el-table-column label="审批人" align="center" prop="approverUserName" />-->
            <el-table-column label="描述" align="center" prop="problemRemark" :show-overflow-tooltip="true" />
            <el-table-column label="负责部门" align="center" prop="approverUserName" />
            <el-table-column label="状态" align="center" prop="checkStatus" width="90">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.meet_execution_status" :value="scope.row.checkStatus"/>
              </template>
            </el-table-column>
            <el-table-column label="层级" align="center" prop="taskStatus">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.user_level_options" :value="scope.row.taskStatus"/>
              </template>
            </el-table-column>
            <el-table-column label="紧急度" align="center" prop="urgency" width="60">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.meet_urgency"
                          :value="scope.row.urgency"
                          :style="{ color: scope.row.urgency === '高' ? 'red' : '' }"
                          :class="{ 'font-bold': scope.row.urgency === '高' }"
                />
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
                  v-hasPermi="['conference:flow:edit']"
                >查看详情</el-button>
                <el-button v-if="loginUser == scope.row.applicantUserId "
                           size="mini"
                           type="text"
                           icon="el-icon-edit"
                           @click="handleCancel(scope.row)"
                           v-hasPermi="['conference:flow:edit']"
                >撤回</el-button>
                <el-button v-if="loginUserLevel == 5"
                           size="mini"
                           type="text"
                           icon="el-icon-delete"
                           @click="handleDelete(scope.row)"
                           v-hasPermi="['conference:flow:edit']"

                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-card>
      </el-col>
    </el-row>


    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
      <div style="    width: 100%;padding-bottom: 10px;padding-left: 16px;">
        <el-button type="success" @click="prev">上一条</el-button>
        <el-button type="success" @click="next">下一条</el-button>
        <el-button type="primary" @click="submitForm">提 交</el-button>
        <el-button @click="cancel">关 闭</el-button>
        <span style="font-size: 20px;font-weight: bold;padding-left: 50px;">{{form.recordTitle}}_{{form.userName}}_{{form.serialNumber}}</span>
<!--        <span style="font-size: 20px;font-weight: bold;padding-left: 30px; color: #ed5565"  v-if="form.taskStatus < 4 && form.checkStatus == '1'"> 处理倒计时：{{countdown}}</span>
 -->     </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" >
        <el-row>
          <el-col :span="8" class="card-box">
            <el-card>
              <div slot="header"><span><i class="el-icon-link"></i> 发起信息</span></div>
              <el-form-item label="申请人部门" prop="applicantDetpCode">
                <el-select v-model="form.applicantDetpCode" :disabled="isDisabled" >
                  <el-option
                    v-for="item in deptOptions"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="紧急度" prop="urgency">
                <el-select v-model="form.urgency" :disabled="isDisabled" >
                  <el-option
                    v-for="dict in dict.type.meet_urgency"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="问题层级" prop="taskStatus">
                <el-select v-model="form.taskStatus" :disabled="isDisabled" >
                  <el-option
                    v-for="dict in dict.type.user_level_options"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="层级审批人" prop="approverUserId">
                <el-select v-model="form.approverUserId"
                           filterable   :disabled="isDisabled" >
                  <el-option
                    v-for="item in userList"
                    :key="item.userId"
                    :label="item.nickName"
                    :value="item.userId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="申请时间" prop="applicantTime">
                <el-date-picker clearable
                                v-model="form.applicantTime"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"  :readonly="isReadOnly"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="计划交货日期" prop="plannedDeliveryTime" v-if="form.recordType == 1">
                <el-date-picker clearable
                                v-model="form.plannedDeliveryTime"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss" :readonly="isReadOnly"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="产品大类" prop="productCategory" v-if="form.recordType == 1">
                <el-select v-model="form.productCategory"  :readonly="isReadOnly" >
                  <el-option
                    v-for="dict in dict.type.product_category"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="订单号" prop="orderNo" v-if="form.recordType == 1">
                <el-input v-model="form.orderNo"  :readonly="isReadOnly" />
              </el-form-item>
              <el-form-item label="生产批号" prop="produceBathNo" v-if="form.recordType == 1">
                <el-input v-model="form.produceBathNo"  :readonly="isReadOnly" />
              </el-form-item>
              <el-form-item label="物料号" prop="materialNo" v-if="form.recordType == 1">
                <el-input v-model="form.materialNo"  :readonly="isReadOnly" />
              </el-form-item>
              <el-form-item label="问题描述" prop="problemRemark">
                <el-input v-model="form.problemRemark" type="textarea" :rows="2" :readonly="isReadOnly" />
              </el-form-item>
              <el-form-item label="附件上传" prop="fileUrl">
                <file-upload v-model="form.fileUrl"/>
              </el-form-item>
            </el-card>
          </el-col>

          <el-col :span="8" class="card-box">
            <el-card>
              <div slot="header"><span><i class="el-icon-user"></i> 受理信息</span></div>
              <el-form-item label="影响KPI" prop="kpiName">
                <el-select v-model="form.kpiName"  placeholder="请选择影响KPI">
                  <el-option
                    v-for="dict in dict.type.impact_kpi"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="负责人" prop="personLiableName">
                <el-input v-model="form.personLiableName"  placeholder="请输入负责人"/>
              </el-form-item>
              <el-form-item label="问题类型" prop="problemType">
                <el-select v-model="form.problemType"  placeholder="请选择问题类型">
                  <el-option
                    v-for="dict in dict.type.problem_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="计划完成日期" prop="planFinishTime">
                <el-date-picker clearable
                                v-model="form.planFinishTime"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选计划完成日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="实际完成日期" prop="actualFinishTime">
                <el-date-picker clearable
                                v-model="form.actualFinishTime"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择实际完成日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="行动计划" prop="meetAction">
                <el-input v-model="form.meetAction" type="textarea" :rows="6" placeholder="请输入行动计划"/>
              </el-form-item>
              <el-form-item>
               <el-button type="primary"  size="mini" @click="handleUpdateRecord">更新</el-button>
              </el-form-item>

            </el-card>
          </el-col>

          <el-col :span="8" class="card-box">
            <el-card>
              <div slot="header"><span><i class="el-icon-question"></i> 问题状态</span></div>
              <el-form-item label="状态" prop="checkStatus">
                <el-select v-model="form.checkStatus"  >
                  <el-option label="开始" value="1" />
                  <!--<el-option v-if="form.checkStatus !=4 && form.checkStatus !=3" label="结束" value="2" />-->
                  <!--<el-option v-if="form.checkStatus !=1 && form.checkStatus !=2" label="驳回" value="3" />-->
                  <el-option v-if="loginUserLevel == 5 || loginUser == form.applicantUserId" label="关闭" value="4" />
                </el-select>
              </el-form-item>
              <el-form-item v-if="form.checkStatus == 1" label="处理" prop="operationStatus">
                <el-select v-model="form.operationStatus">
                  <el-option label="升级" value="1" />
                  <el-option label="委托" value="3" />
                </el-select>
              </el-form-item>
              <el-form-item v-if="form.operationStatus == 3" label="委托部门" prop="commissionUserId">
                <el-select v-model="form.commissionUserId"  ref='selectPerson' placeholder="请选择委托部门"
                           filterable>
                  <el-option
                    v-for="item in userList"
                    :key="item.userId"
                    :label="item.nickName"
                    :value="item.userId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="最近更新" prop="applicantTime">
                <el-date-picker clearable
                                v-model="form.applicantTime"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
            </el-card>
          </el-col>

          <el-col :span="24" class="card-box">
            <el-card>
              <div slot="header"><span><i class="el-icon-list"></i> 历史行动计划</span></div>
              <div class="el-table el-table--enable-row-hover el-table--medium">
                <table cellspacing="0" style="width: 100%;">
                  <thead>
                  <tr>
                    <th class="el-table__cell is-leaf"><div class="cell">操作人</div></th>
                    <th class="el-table__cell is-leaf"><div class="cell">操作时间</div></th>
                    <th class="el-table__cell is-leaf"><div class="cell">操作状态</div></th>
                    <th class="el-table__cell is-leaf"><div class="cell">流程节点</div></th>
                    <th class="el-table__cell is-leaf"><div class="cell">行动计划</div></th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr :key="index" v-for="(item, index) in form.flowList">
                    <td class="el-table__cell is-leaf"><div class="cell" v-if="item.meetSimName">{{ item.meetSimName }}</div></td>
                    <td class="el-table__cell is-leaf"><div class="cell" v-if="item.meetSimTime">{{ item.meetSimTime }}</div></td>
                    <td class="el-table__cell is-leaf"><div class="cell" v-if="item.meetStatus">
                      <!--{{ item.meetStatus }}-->
                      <template >
                        <dict-tag :options="dict.type.meet_operation_status" :value="item.meetStatus"/>
                      </template>
                    </div></td>
                    <td class="el-table__cell is-leaf"><div class="cell" v-if="item.taskStatus">
                      <!--{{ item.meetStatus }}-->
                      <template >
                        <dict-tag :options="dict.type.user_level_options" :value="item.taskStatus"/>
                      </template>
                    </div></td>
                    <td class="el-table__cell is-leaf"><div class="cell" v-if="item.meetAction">{{ item.meetAction }}</div></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import { listFlow, getFlow, delFlow, addFlow, getStatisticRecord,updateFlow,rejectRecord,updateProblemLevel,closeRecord,getIds,updateRecord } from "@/api/conference/flow";
  import {deptTreeSelect, getUserByUserName} from "@/api/system/user";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import moment from '@/utils/moment'
  import * as echarts from "echarts";

  export default {
    name: "Flow",
    components: {Treeselect},
    dicts: ['user_level_options', 'product_category', 'meet_process_status', 'meet_execution_status','impact_kpi','problem_type','meet_operation_status','meet_urgency'],
    data() {
      return {
        autoUpgradationTime: '',
        countdown: '', // 用于显示倒计时的字符串
        timer: null, // 用于存储定时器的ID

        kpi1:null,
        kpi2:null,
        kpi3:null,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 待办表格数据
        flowList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        isDisabled: true,
        isReadOnly:true,
        loginUser:null,
        loginUserLevel:null,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          problemStartDate: null,
          problemEndDate: null,
          problemLevel: null,
          taskStatus: null,
          userName:null,
          serialNumber:null,
          recordTitle:null,
          productCategory:null,
          approverUserId:null,
          listType:'1',
          applicantDetpCode: null,
          urgency: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          id: [
            { required: true, message: "不能为空", trigger: "blur" }
          ],
          meetAction: [
            { required: true, message: "请填写行动计划", trigger: "blur" }
          ],
          meetRecordId: [
            { required: true, message: "不能为空", trigger: "blur" }
          ],
        },
        currentIndex: 0,
        recordIds: undefined,
        userList: undefined,
        deptOptions: undefined,
        statisticTitle : moment().year()+'年',
        option1:{},
        option2:{},
        option3:{}
      };
    },
    created() {
      this.getDeptTree();
      this.queryUser();
      this.getList();
      this.getAllRecordIds()
      this.getStatistic()
      this.loginUser  = this.$store.state.user.id
      this.loginUserLevel = this.$store.state.user.userLevel
    },
    // mounted(){
    //   this.getStatistic()
    // },
    methods: {
      getStatistic(){
        getStatisticRecord().then(response => {
          // response.data.KPI1.

          this.kpi1 = echarts.init(this.$refs.kpi1)
          this.option1 = {
            title: {
              left: 'center',
              text: this.statisticTitle+response.data.KPI1TITLE,
              top:2,
              padding:0,
              textStyle:{
                fontSize:12
              }
            },
            grid:{
              top:40
            },
            xAxis: {
              type: 'category',
              axisLabel: {
                interval: 0 // 显示所有标签，如果想要更小的间隔可以设置为1或更大的数字
              },
              data: response.data.KPI1.xAxis
            },
            yAxis: {
              type: 'value',
              min:90,
              max:100,
              interval: 2,
            },
            series: [
              {
                data: response.data.KPI1.yAxis,
                type: 'line',
                itemStyle : {
                  normal: {
                    label : {
                      show: true,
                      formatter: function(params) {
                        return params.value+'%'; // 将标签内容保留两位小数
                      }
                    }}
                },
                markLine: {
                  symbol: ['none', 'none'],
                  label: {
                    // position: 'end',
                    formatter: '目标值'
                  },
                  lineStyle: {
                    type: 'solid',
                    width: 2
                  },
                  data: [
                    {
                      yAxis: 98,
                      lineStyle: { color: '#ed5565' },
                      label: { color: '#ed5565' }
                    }
                  ]
                }
              }
            ]
          };
          this.kpi1.setOption(this.option1)

          this.kpi2 = echarts.init(this.$refs.kpi2)
          this.option2 = {
            title: {
              left: 'center',
              text: this.statisticTitle+response.data.KPI2TITLE,
              top:2,
              padding:0,
              textStyle:{
                fontSize:12
              }
            },
            grid:{
              top:40
            },
            xAxis: {
              type: 'category',
              axisLabel: {
                interval: 0 // 显示所有标签，如果想要更小的间隔可以设置为1或更大的数字
              },
              data: response.data.KPI2.xAxis
            },
            yAxis: {
              type: 'value',
              min:90,
              max:100,
              interval: 2,
            },
            series: [
              {
                data: response.data.KPI2.yAxis,
                type: 'line',
                itemStyle : {
                  normal: {
                    label : {
                      show: true,
                      formatter: function(params) {
                        return params.value+'%'; // 将标签内容保留两位小数
                      }
                    }}
                },
                markLine: {
                  symbol: ['none', 'none'],
                  label: {
                    formatter: '目标值'
                  },
                  lineStyle: {
                    type: 'solid',
                    width: 2
                  },
                  data: [
                    {
                      yAxis: 95,
                      lineStyle: { color: '#ed5565' },
                      label: { color: '#ed5565' }
                    }
                  ]
                }
              }
            ]
          };
          this.kpi2.setOption(this.option2)

          this.kpi3 = echarts.init(this.$refs.kpi3)
          this.option3 = {
            title: {
              left: 'center',
              text: this.statisticTitle+response.data.KPI3TITLE,
              top:2,
              padding:0,
              textStyle:{
                fontSize:12
              }
            },
            grid:{
              top:40
            },
            xAxis: {
              type: 'category',
              axisLabel: {
                interval: 0 // 显示所有标签，如果想要更小的间隔可以设置为1或更大的数字
              },
              data: response.data.KPI3.xAxis
            },
            yAxis: {
              type: 'value',
              min:90,
              max:100,
              interval: 2,
            },
            series: [
              {
                data: response.data.KPI3.yAxis,
                type: 'line',
                itemStyle : {
                  normal: {
                    label : {
                      show: true,
                      formatter: function(params) {
                        return params.value+'%'; // 将标签内容保留两位小数
                      }
                    }}},
                markLine: {
                  symbol: ['none', 'none'],
                  label: {
                    formatter: '目标值'
                  },
                  lineStyle: {
                    type: 'solid',
                    width: 2
                  },
                  data: [
                    {
                      yAxis: 99,
                      lineStyle: { color: '#ed5565' },
                      label: { color: '#ed5565' }
                    }
                  ]
                }
              }
            ]
          };
          this.kpi3.setOption(this.option3)
        })
      },
      /** 查询待办列表 */
      getList() {
        if (moment(this.queryParams.problemStartDate).diff(this.queryParams.problemEndDate) > 0) {
          return this.$modal.msgWarning("开始时间不能晚于结束时间");
        }
        this.loading = true;
        listFlow(this.queryParams).then(response => {
          this.flowList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      refresh(){
        this.getStatistic()
      },
      getAllRecordIds() {
        getIds(this.queryParams).then(response => {
          this.recordIds = response.data;
        });
      },
      queryUser() {
        const dataReq = {
          userName: ''
        }
        getUserByUserName(dataReq).then(response => {
          this.userList = response.data;
        });
      },
      /** 查询部门下拉树结构 */
      getDeptTree() {
        deptTreeSelect().then(response => {
          this.deptOptions = response.data[0].children;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          meetRecordId: null,
          meetSimName: null,
          meetSimCode: null,
          meetSimTime: null,
          meetStatus: null
        };
        this.countdown = '00:00:00';
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
        this.getAllRecordIds()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      handleEditStatus(status){
        if (status == 3) {
          this.isDisabled = false;
          this.isReadOnly = false;
        } else {
          this.isDisabled = true;
          this.isReadOnly = true;
        }
      },
      handleCancel(row){
        const id = row.id || this.ids
        if (id != null) {
          closeRecord(id).then(response => {
            this.$modal.msgSuccess("撤销成功");
            this.getList();
          });
        } else {
          this.$modal.msgError("系统错误");
        }
      },
      /** 修改按钮操作 */ async handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        await getFlow(id).then(response => {
          this.form = response.data;
          //this.autoUpgradationTime = moment(this.form.autoUpgradationTime)
          this.open = true;
          // 初始化倒计时
          //this.startCountdown();
          this.handleEditStatus(response.data.meetStatus)
          this.title = "修改待办";
        });
        let selectIndex = 0
        this.recordIds.forEach(function (item, index, recordIds) {
          if (item == id) {
            selectIndex = index
            return
          }
        })
        this.currentIndex = selectIndex
      },

      // 初始化并启动倒计时
      startCountdown() {
        if (!this.autoUpgradationTime) return;

        // 计算24小时后的时间点
        const targetTime = this.autoUpgradationTime.clone().add(24, 'hours');

        // 立即更新一次倒计时，然后设置定时器每秒更新
        this.updateCountdown(targetTime);
        this.timer = setInterval(() => this.updateCountdown(targetTime), 1000);
      },
      updateCountdown(targetTime) {
        const now = moment();

        // 计算剩余时间
        const diff = targetTime.diff(now, 'milliseconds');

        // 如果时间差小于0，则停止倒计时
        if (diff < 0) {
          this.countdown = '00:00:00'; // 倒计时结束
          clearInterval(this.timer);
          return;
        }

        // 将毫秒转换为小时、分钟和秒
        const hours = Math.floor(diff / (1000 * 60 * 60));
        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((diff % (1000 * 60)) / 1000);

        // 格式化并更新倒计时
        this.countdown = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
      },
      // 组件销毁时清除定时器
      beforeDestroy() {
        if (this.timer) {
          clearInterval(this.timer);
        }
      },


      async prev() {
        if (this.currentIndex - 1 < 0) {
          this.$modal.msgError("已是第一条数据");
          return;
        }
        this.reset();
        const id = this.recordIds[this.currentIndex - 1]
        await getFlow(id).then(response => {
          this.form = response.data;
          //this.autoUpgradationTime = moment(this.form.autoUpgradationTime)
          // 初始化倒计时
          //this.startCountdown();
          this.handleEditStatus(response.data.meetStatus)
        });
        this.getAllRecordIds()
        let selectIndex = 0
        this.recordIds.forEach(function (item, index, recordIds) {
          if (item == id) {
            selectIndex = index
            return
          }
        })
        this.currentIndex = selectIndex
      },
      async next() {
        if (this.currentIndex + 1 >= this.recordIds.length) {
          this.$modal.msgError("已是最后一条数据");
          return;
        }
        this.reset();
        const id = this.recordIds[this.currentIndex + 1]
        await getFlow(id).then(response => {
          this.form = response.data;
          //this.autoUpgradationTime = moment(this.form.autoUpgradationTime)
          // 初始化倒计时
          //this.startCountdown();
          this.handleEditStatus(response.data.meetStatus)
        });
        this.getAllRecordIds()
        let selectIndex = 0
        this.recordIds.forEach(function (item, index, recordIds) {
          if (item == id) {
            selectIndex = index
            return
          }
        })
        this.currentIndex = selectIndex
      },
      updateMeetRecord() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            // const personLiableName = this.$refs.selectPerson.selected.label
            // const handingDeptName = this.$refs.selectHandingDept.selected.label
            if (this.form.id != null) {
              // this.form.personLiableName = personLiableName
              // this.form.handingDeptName = handingDeptName
              updateProblemLevel(this.form).then(response => {
                this.$modal.msgSuccess("升级成功");
                this.getList();
              });
            } else {
              this.$modal.msgError("系统错误");
            }
          }
        });
      },
      closeMeetRecord() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              closeRecord(this.form).then(response => {
                this.$modal.msgSuccess("关闭成功");
              });
            } else {
              this.$modal.msgError("系统错误");
            }
          }
        });
      },
      rejectMeetRecord() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              rejectRecord(this.form).then(response => {
                this.$modal.msgSuccess("拒绝成功");
              });
            } else {
              this.$modal.msgError("系统错误");
            }
          }
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.operationStatus == '3') {
              const approverUserName = this.$refs.selectPerson.selected.label
              this.form.approverUserId = this.form.commissionUserId
              this.form.approverUserName = approverUserName
            }

            if (this.form.id != null) {
              updateFlow(this.form).then(response => {
                this.$modal.msgSuccess("提交成功");
                this.getList();
              });
            }
          }
        });
      },
      handleUpdateRecord(){
        console.log("update")
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateRecord(this.form).then(response => {
                this.$modal.msgSuccess("更新成功");
                this.getList();
                getFlow(this.recordIds[this.currentIndex]).then(response => {
                  this.form = response.data;
                  this.handleEditStatus(response.data.meetStatus)
                });
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除？').then(function() {
          return delFlow(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('conference/flow/export', {
          ...this.queryParams
        }, `flow_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>

<style scoped>
  .app-container {
    padding: 20px;
  }

  .box-card {
    margin-bottom: 20px;
  }

  .dialog-footer {
    text-align: center;
  }
  .processing{
    width: 6px;
    height: 6px;
    border-radius: 50px;
    background-color: #FE685D;
  }
  .done{
    width: 6px;
    height: 6px;
    border-radius: 50px;
    background-color: #5DFE96;
  }

</style>
